import { Icon } from '@iconify/react'
import { useNavigate } from 'react-router-dom'
import { Card, CardBody } from 'reactstrap'
import { privacyPoints } from './constant'
import themeConfig from '@configs/themeConfig'

const PrivacyPolicy = () => {
  const navigate = useNavigate()
  const handleOpenWindows = (link) => {
    window.open(link, '_blank')
  }
  return (
    <Card className='mb-0'>
      <div className="p-2 d-flex align-items-center bg-yellow justify-content-center ">
        <img
          src={themeConfig.app.appLogoImage}
          alt="logo-dark"
          height={60}
          width={60}
        />
        <h2 className=" mb-0">ethera</h2>
      </div>
      <div className=" px-2 py-1 bg-yellow page-header xSmall-up-between">
        <div className="page-header--title d-f-center">
          <Icon
            className="page-header--title__leftArrow"
            icon="bx:chevron-left"
            width="40"
            height="40"
            onClick={() => navigate(-1)}
          />
          <span className="heading-1 display-1">Privacy Policy </span>
        </div>
      </div>
      <CardBody className="privacy-policy-body">
        <div className="bg-white privacy-policy-pd">
          <p className="black line-height-2">
            Last Updated/Effective Date: December 30, 2019
          </p>
          <p className="black py-2 line-height-2">
            This Privacy Policy describes how Ethera Care Inc. (“Ethera Care
            Inc.” or “We” or “Us” or “Our”) uses and discloses the Personal
            Information you provide to us or that we collect when you use our
            websites, mobile applications, software, platforms and services
            (“Services”). Before providing Personal Information to us, please
            review this Privacy Policy carefully. Certain Ethera Care Inc.
            Services may use a different privacy policy to provide notice to you
            about how we us and disclose the Personal Information we collect in
            the context of that Service. To the extent that we post or reference
            a different privacy policy, that different privacy policy, not this
            Privacy Policy, will apply to your Personal Information collected in
            the context of that Service.
          </p>
          <ol className="privacy-policy-ol-list">
            {privacyPoints.map(
              ({
                title,
                description,
                points,
                paragraph,
                additional_points,
                additional_paragraph
              }) => (
                <>
                  <li className="black line-height-2">{title}</li>
                  <p className="pb-2 black line-height-2">{description}</p>
                  <ul className="ul-points">
                    {points?.map(({ point, nested_points }) => (
                      <>
                        <li className="black line-height-2">{point}</li>
                        <ul className="ul-points">
                          {nested_points?.map(({ point }) => (
                            <li className="black line-height-2">{point}</li>
                          ))}
                        </ul>
                      </>
                    ))}
                  </ul>
                  {paragraph && (
                    <p className="pb-2 black line-height-2"> {paragraph} </p>
                  )}
                  <ul className="ul-points">
                    {additional_points?.map(({ point }) => (
                      <li className="black line-height-2"> {point} </li>
                    ))}
                  </ul>
                  {additional_paragraph && (
                    <p className="black line-height-2">
                      {additional_paragraph}
                    </p>
                  )}
                </>
              )
            )}
          </ol>
          <hr className="horizantel-row-privacy" />
          <footer>
            <nav className="privacy-policy-footer-nav">
              <div className="privacy-policy-footer">
                <ul
                  className="d-flex "
                  style={{ listStyle: 'none', gap: '1rem' }}
                >
                  <li
                    className="facebook-pd pointer"
                    onClick={() => handleOpenWindows('https://www.facebook.com/my.ethera')
                    }
                  >
                    <a>
                      <Icon
                        icon="brandico:facebook"
                        fontSize={20}
                        color="white"
                      />
                    </a>
                  </li>
                  <li
                    className="pointer"
                    onClick={() => handleOpenWindows('https://www.instagram.com/my.ethera/')
                    }
                  >
                    <a>
                      <Icon
                        icon="ri:instagram-line"
                        fontSize={20}
                        color="white"
                      />
                    </a>
                  </li>
                  <li
                    className="pointer"
                    onClick={() => handleOpenWindows(
                        'https://www.linkedin.com/company/myethera/'
                      )
                    }
                  >
                    <a>
                      <Icon icon="ri:linkedin-fill" fontSize={20} />
                    </a>
                  </li>
                </ul>
              </div>
              <div>
                <p className='black  line-height-2"'>
                  Copyright &#169; 2023 Ethera. All rights reserved.
                </p>
              </div>
            </nav>
          </footer>
        </div>
      </CardBody>
    </Card>
  )
}

export default PrivacyPolicy
